<template>
  <pageTabelLayout>
    <template #pageHeader>
      <div class="search-form divClass" v-if="headerShow">
        <a-form size="small" :model="pageData.queryData" layout="inline">
          
            <a-form-item label-col-flex="80px" :style="{width:'330px'}" label="记录单号">
              <a-input
                @press-enter="selectHandler"
                class="bacClass"
                v-model="pageData.queryData.recordCode"
                allow-clear
              />
            </a-form-item>
          
          
            <a-form-item label-col-flex="80px" :style="{width:'330px'}" label="日期">
              <a-range-picker  popup-container="html"  class="bacClass" v-model="pageData.queryData.createTimeArr" />
            </a-form-item>
          
          
            <a-form-item label-col-flex="80px" :style="{width:'330px'}" label="流转卡号">
              <a-input
                @press-enter="selectHandler"
                class="bacClass"
                v-model="pageData.queryData.flowCardCode"
                allow-clear
              />
            </a-form-item>
          
          
            <a-form-item label-col-flex="80px" :style="{width:'330px'}" label="布号">
              <a-input
                @press-enter="selectHandler"
                class="bacClass"
                v-model="pageData.queryData.greyCode"
                allow-clear
              />
            </a-form-item>
          
          
            <a-form-item label-col-flex="80px" :style="{width:'330px'}" label="品名">
              <a-input
                @press-enter="selectHandler"
                class="bacClass"
                v-model="pageData.queryData.productName"
                allow-clear
              />
            </a-form-item>
          
          
            <a-form-item label-col-flex="80px" :style="{width:'330px'}" label="订单号">
              <a-input class="bacClass" v-model="pageData.queryData.orderNumber" allow-clear />
            </a-form-item>
          
          
            <a-form-item label-col-flex="80px" :style="{width:'330px'}" label="色号">
              <a-input
                @press-enter="selectHandler"
                class="bacClass"
                v-model="pageData.queryData.colorCode"
                allow-clear
              />
            </a-form-item>
          
          
            <a-form-item label-col-flex="80px" :style="{width:'330px'}" label="色称">
              <a-input class="bacClass" v-model="pageData.queryData.colorName" allow-clear />
            </a-form-item>
          
          
            <a-form-item label-col-flex="80px" :style="{width:'330px'}" label="客户订单号">
              <a-input
                @press-enter="selectHandler"
                class="bacClass"
                v-model="pageData.queryData.clientOrderNumber"
                allow-clear
              />
            </a-form-item>
          
          
            <a-form-item label-col-flex="80px" :style="{width:'330px'}" label="合约号">
              <a-input
                @press-enter="selectHandler"
                class="bacClass"
                v-model="pageData.queryData.contractCode"
                allow-clear
              />
            </a-form-item>
          
          
            <a-form-item label-col-flex="80px" :style="{width:'330px'}" label="客户布号">
              <a-input
                @press-enter="selectHandler"
                class="bacClass"
                v-model="pageData.queryData.clientClothCode"
                allow-clear
              />
            </a-form-item>
          
          
            <a-form-item label-col-flex="80px" :style="{width:'330px'}" label="客户品名">
              <a-input
                @press-enter="selectHandler"
                class="bacClass"
                v-model="pageData.queryData.clientGradeName"
                allow-clear
              />
            </a-form-item>
          
          
            <a-form-item label-col-flex="80px" :style="{width:'330px'}" label="PO号">
              <a-input
                @press-enter="selectHandler"
                class="bacClass"
                v-model="pageData.queryData.ponumber"
                allow-clear
              />
            </a-form-item>
          
          
            <a-form-item label-col-flex="80px" :style="{width:'330px'}" label="客户名称">
              <a-input
                @press-enter="selectHandler"
                class="bacClass"
                v-model="pageData.queryData.customName"
                allow-clear
              />
            </a-form-item>
          
          
            <a-form-item
              label-col-flex="80px" :style="{width:'330px'}"
              label="作废状态"
              field="cancellationState"
            >
              <a-select popup-container="html" 
                style="width: 100%"
                class="bacClass"
                v-model="pageData.queryData.cancellationState"
                allow-search
              >
                <a-option value="">全部</a-option>
                <a-option :value="0">正常</a-option>
                <a-option :value="1">作废</a-option>
              </a-select>
            </a-form-item>
          
        </a-form>
      </div>
      <div class="my-divisders">
        <a-divider orientation="center">
          <icon-double-up
            v-if="headerShow"
            @click="headerShow = false"
            :strokeWidth="2"
            :size="18"
          />
          <icon-double-down v-else @click="headerShow = true" :strokeWidth="2" :size="18" />
        </a-divider>
      </div>
      <div class="my-tool-bar">
        <Toolbar
          :items="['查询', '新增', '删除']"
          @add="addHandler"
          @del="deleteHandler"
          @select="selectHandler"
        >
        </Toolbar>
      </div>
    </template>
    <template #pageTabel>
      <AgGridVuesCopys
        :rowHeight="33"
        :headerHeight="33"
        rowSelection="multiple"
        @grid-ready="gridReady"
        style="height: 100%"
        :defaultColDef="defaultColDef"
        class="ag-theme-alpine"
        :rowData="table.dataList"
        :columnDefs="tc"
        :localeText="localeText1"
        :suppressRowClickSelection="true"
      ></AgGridVuesCopys>
    </template>

    <paginationCopys
      :page-size="pagination.pageSize"
      :current="pagination.page"
      :total="pagination.total"
      show-total
      show-jumper
      show-page-size
      @change="nextDoRefreshPage"
      @page-size-change="nextDoRefreshSize"
      style="justify-content: center"
    />

    <a-drawer
      placement="bottom"
      :drawer-style="{ zIndex: 9999 }"
      :mask-closable="false"
      height="90%"
      :visible="pageData.showAdd"
      unmountOnClose
      @ok="sideOk"
      @cancel="pageData.showAdd = false"
      cancel-text="关闭"
      ok-text="保存"
    >
      <template #title>
        {{ pageData.sideTitle }}
      </template>
      <div style="width: 100%; height: 100%">
        <a-form ref="formRef" :model="dataForm" layout="horizontal">
          <a-row>
            <a-col :span="6">
              <a-form-item
                :label-col-flex="pageData.labelColFlex"
                label="记录单号"
                field="recordCode"
              >
                <a-input class="bacClass" v-model="dataForm.recordCode" />
              </a-form-item>
            </a-col>
            <a-col :span="6">
              <a-form-item
                :label-col-flex="pageData.labelColFlex"
                label="拼缸缸号"
                field="dyelotNumber"
                :validate-trigger="['change', 'blur']"
                :rules="[{ required: true, message: '拼缸缸号必填' }]"
              >
                <a-input class="bacClass" v-model="dataForm.dyelotNumber" />
              </a-form-item>
            </a-col>
            <a-col :span="6">
              <a-form-item
                :label-col-flex="pageData.labelColFlex"
                label="流转卡号"
                field="flowCardCode"
                :validate-trigger="['change', 'blur']"
                :rules="[{ required: true, message: '流转卡号必填' }]"
              >
                <a-input class="bacClass" v-model="dataForm.flowCardCode" />
              </a-form-item>
            </a-col>
            <a-col :span="6">
              <a-form-item
                :label-col-flex="pageData.labelColFlex"
                label="发货流转卡号"
                field="deliverCardCode"
                :validate-trigger="['change', 'blur']"
                :rules="[{ required: true, message: '发货流转卡号必填' }]"
              >
                <a-input class="bacClass" v-model="dataForm.deliverCardCode" />
              </a-form-item>
            </a-col>
            <a-col :span="6">
              <a-form-item
                :label-col-flex="pageData.labelColFlex"
                label="客户名称"
                field="customName"
                :validate-trigger="['change', 'blur']"
                :rules="[{ required: true, message: '客户名称必填' }]"
              >
                <a-input class="bacClass" v-model="dataForm.customName" />
              </a-form-item>
            </a-col>
            <a-col :span="6">
              <a-form-item
                :label-col-flex="pageData.labelColFlex"
                label="布号"
                field="greyCode"
                :validate-trigger="['change', 'blur']"
                :rules="[{ required: true, message: '布号必填' }]"
              >
                <a-input class="bacClass" v-model="dataForm.greyCode" />
              </a-form-item>
            </a-col>
            <a-col :span="6">
              <a-form-item
                :label-col-flex="pageData.labelColFlex"
                label="品名"
                field="productName"
                :validate-trigger="['change', 'blur']"
                :rules="[{ required: true, message: '品名必填' }]"
              >
                <a-input class="bacClass" v-model="dataForm.productName" />
              </a-form-item>
            </a-col>
            <a-col :span="6">
              <a-form-item
                :label-col-flex="pageData.labelColFlex"
                label="色号"
                field="colorCode"
                :validate-trigger="['change', 'blur']"
                :rules="[{ required: true, message: '色号必填' }]"
              >
                <a-input class="bacClass" v-model="dataForm.colorCode" />
              </a-form-item>
            </a-col>
            <a-col :span="6">
              <a-form-item
                :label-col-flex="pageData.labelColFlex"
                label="色称"
                field="colorName"
                :validate-trigger="['change', 'blur']"
                :rules="[{ required: true, message: '色称必填' }]"
              >
                <a-input class="bacClass" v-model="dataForm.colorName" />
              </a-form-item>
            </a-col>
            <a-col :span="6">
              <a-form-item
                :label-col-flex="pageData.labelColFlex"
                label="确认色"
                field="affirmColour"
                :validate-trigger="['change', 'blur']"
                :rules="[{ required: true, message: '确认色必填' }]"
              >
                <a-input class="bacClass" v-model="dataForm.affirmColour" />
              </a-form-item>
            </a-col>
            <a-col :span="6">
              <a-form-item
                :label-col-flex="pageData.labelColFlex"
                label="客户色称"
                field="clientColorName"
                :validate-trigger="['change', 'blur']"
                :rules="[{ required: true, message: '客户名称必填' }]"
              >
                <a-input class="bacClass" v-model="dataForm.clientColorName" />
              </a-form-item>
            </a-col>
            <a-col :span="6">
              <a-form-item
                :label-col-flex="pageData.labelColFlex"
                label="克重"
                field="gramWeight"
                :validate-trigger="['change', 'blur']"
                :rules="[{ required: true, message: '克重必填' }]"
              >
                <a-input class="bacClass" v-model="dataForm.gramWeight" />
              </a-form-item>
            </a-col>
            <a-col :span="6">
              <a-form-item
                :label-col-flex="pageData.labelColFlex"
                label="门幅"
                field="efficacious"
                :validate-trigger="['change', 'blur']"
                :rules="[{ required: true, message: '门幅必填' }]"
              >
                <a-input class="bacClass" v-model="dataForm.efficacious" />
              </a-form-item>
            </a-col>
            <a-col :span="6">
              <a-form-item
                :label-col-flex="pageData.labelColFlex"
                label="客户订单号"
                field="clientOrderNumber"
                :validate-trigger="['change', 'blur']"
                :rules="[{ required: true, message: '客户订单号必填' }]"
              >
                <a-input class="bacClass" v-model="dataForm.clientOrderNumber" />
              </a-form-item>
            </a-col>
            <a-col :span="6">
              <a-form-item
                :label-col-flex="pageData.labelColFlex"
                label="合约号"
                field="contractCode"
              >
                <a-input class="bacClass" v-model="dataForm.contractCode" />
              </a-form-item>
            </a-col>
            <a-col :span="6">
              <a-form-item
                :label-col-flex="pageData.labelColFlex"
                label="订单号"
                field="orderNumber"
                :validate-trigger="['change', 'blur']"
                :rules="[{ required: true, message: '订单号必填' }]"
              >
                <a-input class="bacClass" v-model="dataForm.orderNumber" />
              </a-form-item>
            </a-col>
            <a-col :span="6">
              <a-form-item
                :label-col-flex="pageData.labelColFlex"
                label="PO号"
                field="ponumber"
                :validate-trigger="['change', 'blur']"
                :rules="[{ required: true, message: 'PO号必填' }]"
              >
                <a-input class="bacClass" v-model="dataForm.ponumber" />
              </a-form-item>
            </a-col>
            <a-col :span="6">
              <a-form-item
                :label-col-flex="pageData.labelColFlex"
                label="客户布号"
                field="clientClothCode"
                :validate-trigger="['change', 'blur']"
                :rules="[{ required: true, message: '客户布号必填' }]"
              >
                <a-input class="bacClass" v-model="dataForm.clientClothCode" />
              </a-form-item>
            </a-col>
            <a-col :span="6">
              <a-form-item
                :label-col-flex="pageData.labelColFlex"
                label="客户品名"
                field="clientGradeName"
                :validate-trigger="['change', 'blur']"
                :rules="[{ required: true, message: '客户品名必填' }]"
              >
                <a-input class="bacClass" v-model="dataForm.clientGradeName" />
              </a-form-item>
            </a-col>
            <a-col :span="6">
              <a-form-item :label-col-flex="pageData.labelColFlex" label="款号" field="styleNumber">
                <a-input class="bacClass" v-model="dataForm.styleNumber" />
              </a-form-item>
            </a-col>
            <a-col :span="6">
              <a-form-item
                :label-col-flex="pageData.labelColFlex"
                label="入库匹数"
                field="storageHouseNum"
                :validate-trigger="['change', 'blur']"
                :rules="[{ required: true, message: '入库匹数必填' }]"
              >
                <a-input class="bacClass" v-model="dataForm.storageHouseNum" />
              </a-form-item>
            </a-col>
            <a-col :span="6">
              <a-form-item
                :label-col-flex="pageData.labelColFlex"
                label="收货地址"
                field="receiverAddress"
                :validate-trigger="['change', 'blur']"
                :rules="[{ required: true, message: '收货地址必填' }]"
              >
                <a-input class="bacClass" v-model="dataForm.receiverAddress" />
              </a-form-item>
            </a-col>
            <a-col :span="6">
              <a-form-item
                :label-col-flex="pageData.labelColFlex"
                label="坯布编号"
                field="greigeCode"
                :validate-trigger="['change', 'blur']"
                :rules="[{ required: true, message: '坯布编号必填' }]"
              >
                <a-input class="bacClass" v-model="dataForm.greigeCode" />
              </a-form-item>
            </a-col>
            <a-col :span="6">
              <a-form-item
                :label-col-flex="pageData.labelColFlex"
                label="坯布名称"
                field="greigeName"
              >
                <a-input class="bacClass" v-model="dataForm.greigeName" />
              </a-form-item>
            </a-col>
            <a-col :span="6">
              <a-form-item
                :label-col-flex="pageData.labelColFlex"
                label="制单人"
                field="touchingPerson"
              >
                <a-input class="bacClass" v-model="dataForm.touchingPerson" />
              </a-form-item>
            </a-col>
            <a-col :span="6">
              <a-form-item :label-col-flex="pageData.labelColFlex" label="备注" field="remark">
                <a-input class="bacClass" v-model="dataForm.remark" />
              </a-form-item>
            </a-col>
            <a-col :span="6">
              <a-form-item
                :label-col-flex="pageData.labelColFlex"
                label="物测结果"
                field="objectInferResult"
                :validate-trigger="['change', 'blur']"
                :rules="[{ required: true, message: '物测结果必填' }]"
              >
                <a-input class="bacClass" v-model="dataForm.objectInferResult" />
              </a-form-item>
            </a-col>
            <a-col :span="6">
              <a-form-item
                :label-col-flex="pageData.labelColFlex"
                label="批核结果"
                field="batchCheck"
              >
                <a-input class="bacClass" v-model="dataForm.batchCheck" />
              </a-form-item>
            </a-col>
            <a-col :span="6">
              <a-form-item
                :label-col-flex="pageData.labelColFlex"
                label="物测门幅"
                field="objectInferLimit"
              >
                <a-input class="bacClass" v-model="dataForm.objectInferLimit" />
              </a-form-item>
            </a-col>
            <a-col :span="6">
              <a-form-item
                :label-col-flex="pageData.labelColFlex"
                label="物测克重"
                field="objectInferWeight"
              >
                <a-input class="bacClass" v-model="dataForm.objectInferWeight" />
              </a-form-item>
            </a-col>
            <a-col :span="6">
              <a-form-item
                :label-col-flex="pageData.labelColFlex"
                label="验布门幅"
                field="perchingLimit"
              >
                <a-input class="bacClass" v-model="dataForm.perchingLimit" />
              </a-form-item>
            </a-col>
            <a-col :span="6">
              <a-form-item
                :label-col-flex="pageData.labelColFlex"
                label="对色员"
                field="coloringMatch"
              >
                <a-input class="bacClass" v-model="dataForm.coloringMatch" />
              </a-form-item>
            </a-col>
            <a-col :span="6">
              <a-form-item
                :label-col-flex="pageData.labelColFlex"
                label="验布克重"
                field="perchingWeight"
              >
                <a-input class="bacClass" v-model="dataForm.perchingWeight" />
              </a-form-item>
            </a-col>
            <a-col :span="6">
              <a-form-item :label-col-flex="pageData.labelColFlex" label="色级" field="colourGrade">
                <a-input class="bacClass" v-model="dataForm.colourGrade" />
              </a-form-item>
            </a-col>
            <a-col :span="6">
              <a-form-item :label-col-flex="pageData.labelColFlex" label="等待工序" field="process">
                <a-input class="bacClass" v-model="dataForm.process" />
              </a-form-item>
            </a-col>
            <a-col :span="6">
              <a-form-item
                :label-col-flex="pageData.labelColFlex"
                label="作废状态"
                field="cancellationState"
              >
                <a-select popup-container="html"  class="bacClass" v-model="dataForm.cancellationState" allow-search>
                  <a-option :value="0">正常</a-option>
                  <a-option :value="1">作废</a-option>
                </a-select>
              </a-form-item>
            </a-col>
          </a-row>
          <a-row class="grid-demo" :gutter="24">
            <div class="my-tool-bar" style="padding: 0px 0px 10px 20px">
              <a-button type="primary" size="small" @click="addRowIndex()">
                新增
                <template #icon>
                  <icon-plus />
                </template>
              </a-button>
            </div>
          </a-row>
          <!-- <a-row class="grid-demo" :gutter="24">
            <el-table
              ref="multipleTable"
              :data="dataForm.dataList"
              tooltip-effect="dark"
              style="width: 100%"
              border
            >
              <el-table-column align="center" prop="serialNumber" label="序号" width="100">
                <template #default="scope">
                  {{ scope.$index + 1 }}
                </template>
              </el-table-column>
              <el-table-column
                align="center"
                prop="blemishType"
                label="条形码"
                show-overflow-tooltip
                width="150"
              >
                <template #default="scope">
                  <a-input v-model="dataForm['dataList'][scope.$index].shapeCode"></a-input>
                </template>
              </el-table-column>
              <el-table-column
                align="center"
                prop="blemishType"
                label="库位"
                show-overflow-tooltip
                width="150"
              >
                <template #default="scope">
                  <a-input v-model="dataForm['dataList'][scope.$index].storageLocation"></a-input>
                </template>
              </el-table-column>
              <el-table-column
                align="center"
                prop="blemishType"
                label="匹号"
                show-overflow-tooltip
                width="150"
              >
                <template #default="scope">
                  <a-input v-model="dataForm['dataList'][scope.$index].houseNum"></a-input>
                </template>
              </el-table-column>
              <el-table-column
                align="center"
                prop="blemishType"
                label="磅布重量"
                show-overflow-tooltip
                width="150"
              >
                <template #default="scope">
                  <a-input v-model="dataForm['dataList'][scope.$index].poundWeight"></a-input>
                </template>
              </el-table-column>
              <el-table-column
                align="center"
                prop="blemishType"
                label="重量"
                show-overflow-tooltip
                width="150"
              >
                <template #default="scope">
                  <a-input v-model="dataForm['dataList'][scope.$index].weight"></a-input>
                </template>
              </el-table-column>
              <el-table-column
                align="center"
                prop="blemishType"
                label="磅布米数"
                show-overflow-tooltip
                width="150"
              >
                <template #default="scope">
                  <a-input v-model="dataForm['dataList'][scope.$index].poundMeter"></a-input>
                </template>
              </el-table-column>
              <el-table-column
                align="center"
                prop="blemishType"
                label="米数"
                show-overflow-tooltip
                width="150"
              >
                <template #default="scope">
                  <a-input v-model="dataForm['dataList'][scope.$index].meter"></a-input>
                </template>
              </el-table-column>
              <el-table-column
                align="center"
                prop="blemishType"
                label="门幅"
                show-overflow-tooltip
                width="150"
              >
                <template #default="scope">
                  <a-input v-model="dataForm['dataList'][scope.$index].limit"></a-input>
                </template>
              </el-table-column>
              <el-table-column
                align="center"
                prop="blemishType"
                label="克重"
                show-overflow-tooltip
                width="150"
              >
                <template #default="scope">
                  <a-input v-model="dataForm['dataList'][scope.$index].gramWeight"></a-input>
                </template>
              </el-table-column>
              <el-table-column
                align="center"
                prop="blemishType"
                label="检验等级"
                show-overflow-tooltip
                width="150"
              >
                <template #default="scope">
                  <a-input v-model="dataForm['dataList'][scope.$index].inspectGrades"></a-input>
                </template>
              </el-table-column>
              <el-table-column
                align="center"
                prop="blemishType"
                label="批核后等级"
                show-overflow-tooltip
                width="150"
              >
                <template #default="scope">
                  <a-input v-model="dataForm['dataList'][scope.$index].backGrades"></a-input>
                </template>
              </el-table-column>
              <el-table-column
                align="center"
                prop="blemishType"
                label="结算数量"
                show-overflow-tooltip
                width="150"
              >
                <template #default="scope">
                  <a-input v-model="dataForm['dataList'][scope.$index].accountNumber"></a-input>
                </template>
              </el-table-column>
              <el-table-column
                align="center"
                prop="blemishType"
                label="出货长度"
                show-overflow-tooltip
                width="150"
              >
                <template #default="scope">
                  <a-input v-model="dataForm['dataList'][scope.$index].clearExtent"></a-input>
                </template>
              </el-table-column>
              <el-table-column
                align="center"
                prop="blemishType"
                label="出货长度单位"
                show-overflow-tooltip
                width="150"
              >
                <template #default="scope">
                  <a-input v-model="dataForm['dataList'][scope.$index].clearExtentUnit"></a-input>
                </template>
              </el-table-column>
              <el-table-column
                align="center"
                prop="blemishType"
                label="出货重量"
                show-overflow-tooltip
                width="150"
              >
                <template #default="scope">
                  <a-input v-model="dataForm['dataList'][scope.$index].clearWeight"></a-input>
                </template>
              </el-table-column>
              <el-table-column
                align="center"
                prop="blemishType"
                label="出货重量单位"
                show-overflow-tooltip
                width="150"
              >
                <template #default="scope">
                  <a-input v-model="dataForm['dataList'][scope.$index].clearWeightUnit"></a-input>
                </template>
              </el-table-column>
              <el-table-column
                align="center"
                prop="blemishType"
                label="坯布条形码"
                show-overflow-tooltip
                width="150"
              >
                <template #default="scope">
                  <a-input v-model="dataForm['dataList'][scope.$index].grayShapeCode"></a-input>
                </template>
              </el-table-column>
              <el-table-column
                align="center"
                prop="remark"
                label="坯布匹数"
                show-overflow-tooltip
                width="150"
              >
                <template #default="scope">
                  <a-input v-model="dataForm['dataList'][scope.$index].grayHouseNum"></a-input>
                </template>
              </el-table-column>
              <el-table-column
                align="center"
                prop="remark"
                label="坯布重量"
                show-overflow-tooltip
                width="150"
              >
                <template #default="scope">
                  <a-input v-model="dataForm['dataList'][scope.$index].grayWeight"></a-input>
                </template>
              </el-table-column>
              <el-table-column
                align="center"
                prop="remark"
                label="布票号"
                show-overflow-tooltip
                width="150"
              >
                <template #default="scope">
                  <a-input v-model="dataForm['dataList'][scope.$index].ticketExtension"></a-input>
                </template>
              </el-table-column>
              <el-table-column
                align="center"
                prop="remark"
                label="备注"
                show-overflow-tooltip
                width="150"
              >
                <template #default="scope">
                  <a-input v-model="dataForm['dataList'][scope.$index].remark"></a-input>
                </template>
              </el-table-column>
              <el-table-column align="center" label="操作" width="120" fixed="right">
                <template #default="scope">
                  <a-button
                    type="primary"
                    size="mini"
                    status="danger"
                    @click="deleteRowIndex(scope.row)"
                  >
                    <template #icon>
                      <icon-delete />
                    </template>
                    删除
                  </a-button>
                </template>
              </el-table-column>
            </el-table>
          </a-row> -->
        </a-form>
        <div style="width: 100%; height: 40%">
          <encapsulation-agrid
            ref="configAgGridRef"
            :configaggrid="configaggrid"
          ></encapsulation-agrid>
        </div>
      </div>
    </a-drawer>
  </pageTabelLayout>
</template>

<script lang="ts">
  import { post, get } from '@/api/http'
  import { useTable, usePagination, useTableColumn } from '@/hooks/table'

  import { ref, reactive, onMounted } from 'vue'
  import Toolbar from '@/components/Toolbar.vue'
  import { Message, Modal } from '@arco-design/web-vue'
  import { FormInstance } from '@arco-design/web-vue/es/form'
  import 'ag-grid-community/styles/ag-grid.css'
  import 'ag-grid-community/styles/ag-theme-alpine.css'
  import { localeText } from '@/api/aggridZw'
  

  interface paramData {
    id: any
    recordCode: string | undefined //记录单号
    dyelotNumber: string | undefined //拼缸缸号
    flowCardCode: string | undefined //流转卡号
    deliverCardCode: string | undefined //发货流转卡号
    customName: string | undefined //客户名称
    greyCode: string | undefined //布号
    productName: string | undefined //品名
    colorCode: string | undefined //色号
    colorName: string | undefined //色称
    affirmColour: string | undefined //确认色
    clientColorName: string | undefined //客户色称
    clientClothCode: string | undefined //客户布号
    clientGradeName: string | undefined //客户品名
    gramWeight: number | undefined //克重
    efficacious: string | undefined //门幅
    clientOrderNumber: string | undefined //客户订单号
    contractCode: string | undefined //合约号
    orderNumber: string | undefined //订单号
    ponumber: string | undefined //PO号
    styleNumber: number | undefined //款号
    storageHouseNum: number | undefined //入库匹数
    storageNumber: number | undefined //入库数量
    receiverAddress: string | undefined //收货地址
    greigeCode: string | undefined //坯布编号
    greigeName: string | undefined //坯布名称
    touchingPerson: string | undefined //制单人
    remark: string | undefined //备注
    objectInferResult: string | undefined //物测结果
    batchCheck: string | undefined //批核结果
    objectInferLimit: string | undefined //物测门幅
    objectInferWeight: number | undefined //物测克重
    perchingLimit: string | undefined //验布门幅
    perchingWeight: number | undefined //验布克重
    colourGrade: string | undefined //色级
    coloringMatch: string | undefined //对色员
    process: string | undefined //等待工序
    cancellationState: string | undefined //作废状态
    dataList: any
  }

  export default {
    //成品批核
    name: 'FinishedProductApproval',
    setup() {
      //隐藏显示头部
      const headerShow = ref<boolean>(true)
      const pageData = reactive<{
        showAdd: boolean
        sideTitle: string
        dropDownData: any
        pageLoading: boolean
        theight: number
        rHeight: number | undefined
        labelColFlex: string
        queryData: any
        labelColFlex1: string
      }>({
        showAdd: false,
        sideTitle: '新增成品批核',
        dropDownData: '',
        pageLoading: false,
        theight: 0,
        rHeight: 0,
        labelColFlex: '120px',
        queryData: {
          flowCardCode: '',
          createTimeArr: [],
          greyCode: '',
          recordCode: '',
          productName: '',
          deleteState: 0,
          orderNumber: '',
          colorCode: '',
          colorName: '',
          clientOrderNumber: '',
          contractCode: '',
          clientClothCode: '',
          clientGradeName: '',
          ponumber: '',
          customName: '',
          cancellationState: '',
        },
        labelColFlex1: '80px',
      })
      const dataForm = reactive<paramData>({
        id: null,
        recordCode: '', //记录单号
        dyelotNumber: '', //拼缸缸号
        flowCardCode: '', //流转卡号
        deliverCardCode: '', //发货流转卡号
        customName: '', //客户名称
        greyCode: '', //布号
        productName: '', //品名
        colorCode: '', //色号
        colorName: '', //色称
        affirmColour: '', //确认色
        clientColorName: '', //客户色称
        clientClothCode: '', //客户布号
        clientGradeName: '', //客户品名
        gramWeight: 0, //克重
        efficacious: '', //门幅
        clientOrderNumber: '', //客户订单号
        contractCode: '', //合约号
        orderNumber: '', //订单号
        ponumber: '', //PO号
        styleNumber: 0, //款号
        storageHouseNum: 0, //入库匹数
        storageNumber: 0, //入库数量
        receiverAddress: '', //收货地址
        greigeCode: '', //坯布编号
        greigeName: '', //坯布名称
        touchingPerson: '', //制单人
        remark: '', //备注
        objectInferResult: '', //物测结果
        batchCheck: '', //批核结果
        objectInferLimit: '', //物测门幅
        objectInferWeight: 0, //物测克重
        perchingLimit: '', //验布门幅
        perchingWeight: 0, //验布克重
        colourGrade: '', //色级
        coloringMatch: '', //对色员
        process: '', //等待工序
        cancellationState: '',
        dataList: [],
      })
      //查询列表
      onMounted(() => {
        selectHandler()
      })

      //切换分页
      const nextDoRefreshPage = (val: any) => {
        pagination.page = val
        doRefresh()
      }
      const nextDoRefreshSize = (val: any) => {
        pagination.pageSize = val
        doRefresh()
      }
      const pagination = usePagination(doRefresh)
      const table = useTable()
      function doRefresh() {
        pageData.pageLoading = true
        pageData.queryData.page = pagination.page
        pageData.queryData.size = pagination.pageSize
        post({
          url: 'dwQms/BatchCheck/getPage',
          data: pageData.queryData,
        })
          .then(({ data, code }: any) => {
            if (code === 200) {
              table.handleSuccess(data.data)
              pagination.setTotalSize(data.total)
              gridOption.value.setRowData(data.data)
            }
          })
          .catch(console.log)
          .finally(() => {
            pageData.pageLoading = false
          })
      }
      //查询
      const selectHandler = () => {
        pagination.page = 1
        doRefresh()
      }
      //------新增、修改页面开始------
      const addHandler = () => {
        for (var key in dataForm) {
          if (key === 'id') {
            dataForm[key] = null
          } else if (key === 'dataList') {
            dataForm[key] = []
          } else {
            dataForm[key] = ''
          }
        }
        dataForm.billingDate = new Date()
        dataForm.touchingPerson = JSON.parse(
          sessionStorage.getItem('userLoginData') as any
        ).username
        pageData.showAdd = true
        pageData.sideTitle = '新增成品批核'
      }
      const editHandler = (record: paramData) => {
        post({
          url: 'dwQms/BatchCheck/selectMap',
          data: { flowCardCode: record.flowCardCode },
        }).then((res: any) => {
          if (res.code === 200) {
            var FinishedInspection: paramData = res.data.FinishedInspection
            for (var key in record) {
              dataForm[key] = FinishedInspection[key]
            }
            dataForm.dataList = res.data.FinishedInspectionDetail
          } else {
            Message.error({
              content: res.message,
              duration: 5000,
            })
          }
        })

        pageData.sideTitle = '修改成品批核'
        pageData.showAdd = true
      }

      const formRef = ref<FormInstance>()
      const sideOk = () => {
        formRef.value?.validate().then((err) => {
          if (!err) {
            var dataObj: any = {
              FinishedInspection: dataForm,
              List: dataForm.dataList,
            }
            if (pageData.sideTitle === '新增成品批核') {
              post({
                url: 'dwQms/BatchCheck/insertMap',
                data: dataObj,
              }).then((res: any) => {
                if (res.code === 200) {
                  formRef.value?.resetFields()

                  pageData.showAdd = false

                  Message.success({
                    content: '新增成功',
                    duration: 5000,
                  })
                  selectHandler()
                } else {
                  Message.error({
                    content: res.message,
                    duration: 5000,
                  })
                }
              })
            } else {
              post({
                url: 'dwQms/BatchCheck/updateMap',
                data: dataObj,
              }).then((res: any) => {
                if (res.code === 200) {
                  formRef.value?.resetFields()
                  pageData.showAdd = false

                  Message.success({
                    content: '修改成功',
                    duration: 5000,
                  })
                  selectHandler()
                } else {
                  Message.error({
                    content: res.message,
                    duration: 5000,
                  })
                }
              })
            }
          }
        })
      }
      //------新增、修改页面结束------
      //------删除方法开始------
      const deleteHandler = () => {
        if (gridOption.value.getSelectedRows().length === 0) {
          return
        }
        Modal.confirm({
          title: '系统提示',
          content: '确认删除选中的数据?',
          onOk() {
            post({
              url: 'dwQms/BatchCheck/delete',
              data: gridOption.value.getSelectedRows().map((o: any) => {
                return o.id
              }),
            }).then(({ code, data }: any) => {
              if (code === 200) {
                Message.success({
                  content: '删除成功',
                  duration: 5000,
                })

                pagination.page = 1
                selectHandler()
              } else {
                Message.error({
                  content: '删除失败',
                  duration: 5000,
                })
              }
            })
          },
        })
      }
      //------删除方法结束------

      // 表格准备事件
      const tableColumns = useTableColumn([
        {
          title: '系统编号',
          key: 'id',
          dataIndex: 'id',
          width: 150,
        },
        {
          title: '记录单号',
          key: 'recordCode',
          dataIndex: 'recordCode',
        },
        {
          title: '流转卡号',
          key: 'flowCardCode',
          dataIndex: 'flowCardCode',
        },
        {
          title: '发货流转卡号',
          key: 'deliverCardCode',
          dataIndex: 'deliverCardCode',
        },
        {
          title: '客户名称',
          key: 'customName',
          dataIndex: 'colourName',
        },
        {
          title: '布号',
          key: 'greyCode',
          dataIndex: 'greyCode',
        },

        {
          title: '批核结果',
          key: 'batchCheck',
          dataIndex: 'batchCheck',
        },
        {
          title: '物测结果',
          key: 'objectInferResult',
          dataIndex: 'objectInferResult',
        },
        {
          title: '品名',
          key: 'productName',
          dataIndex: 'productName',
        },
        {
          title: '色号',
          key: 'colorCode',
          dataIndex: 'colorCode',
        },

        {
          title: '色称',
          key: 'colorName',
          dataIndex: 'colorName',
        },
        {
          title: '确认色',
          key: 'affirmColour',
          dataIndex: 'affirmColour',
        },
        {
          title: '门幅',
          key: 'efficacious',
          dataIndex: 'efficacious',
        },
        {
          title: '克重',
          key: 'gramWeight',
          dataIndex: 'gramWeight',
        },
        {
          title: '客户订单号',
          key: 'clientOrderNumber',
          dataIndex: 'clientOrderNumber',
        },
        {
          title: '合约号',
          key: 'contractCode',
          dataIndex: 'contractCode',
        },
        {
          title: '客户布号',
          key: 'clientClothCode',
          dataIndex: 'clientClothCode',
        },
        {
          title: '客户品名',
          key: 'clientGradeName',
          dataIndex: 'clientGradeName',
        },

        {
          title: '客户色称',
          key: 'clientColorName',
          dataIndex: 'clientColorName',
        },
        {
          title: '款号',
          key: 'styleNumber',
          dataIndex: 'styleNumber',
        },
        {
          title: 'PO号',
          key: 'ponumber',
          dataIndex: 'ponumber',
        },
        {
          title: '制单人',
          key: 'touchingPerson',
          dataIndex: 'touchingPerson',
        },

        {
          title: '备注',
          key: 'remark',
          dataIndex: 'remark',
        },
        {
          title: '坯布编号',
          key: 'greigeCode',
          dataIndex: 'greigeCode',
        },
        {
          title: '坯布名称',
          key: 'greigeName',
          dataIndex: 'greigeName',
        },
        {
          title: '收货地址',
          key: 'receiverAddress',
          dataIndex: 'receiverAddress',
        },
        {
          title: '拼缸缸号',
          key: 'dyelotNumber',
          dataIndex: 'dyelotNumber',
        },
        {
          title: '入库匹数',
          key: 'storageHouseNum',
          dataIndex: 'storageHouseNum',
        },

        {
          title: '审核状态',
          key: 'auditState',
          dataIndex: 'auditState',
        },
        {
          title: '审核人',
          key: 'auditPerson',
          dataIndex: 'auditPerson',
        },
        {
          title: '审核日期',
          key: 'auditDate',
          dataIndex: 'auditDate',
        },
        {
          title: '修改人',
          key: 'updateName',
          dataIndex: 'updateName',
        },
        {
          title: '修改日期',
          key: 'updateTime',
          dataIndex: 'updateTime',
        },
        {
          title: '作废状态',
          key: 'cancellationState',
          dataIndex: 'cancellationState',
          cellRenderer: {
            template: `
                  <el-tag type="success" v-if="states == 0">正常</el-tag>
                  <el-tag type="danger"  v-if="states == 1">作废</el-tag>
                  `,
            setup(props: any) {
              return {
                states: props.params.data.cancellationState,
              }
            },
          },
        },
        {
          title: '色级',
          key: 'colourGrade',
          dataIndex: 'colourGrade',
        },
        {
          title: '对色员',
          key: 'coloringMatch',
          dataIndex: 'coloringMatch',
        },

        {
          title: '操作',
          key: 'id',
          dataIndex: 'id',
          slotName: 'act',
          width: 150,
          fixed: 'right',
        },
      ])
      const gridOption = ref()
      const gridReady = (params: any) => {
        gridOption.value = params.api
      }
      const defaultColDef = {
        sortable: true,
        resizable: true,
        filter: true,
        // flex: 1
      }
      let tc: any[] = tableColumns.map((o) => {
        let obj = {
          headerName: o.title,
          field: o.key,
          pinned: o['fixed'],
          width: o.width,
          children: o.children,
          cellRenderer: o.cellRenderer,
        }
        if (o.slotName === 'act') {
          obj['resizable'] = false
          obj['filter'] = false
          obj['sortable'] = false
          obj['lockPosition'] = o.fixed
          obj['cellRenderer'] = {
            template: `<el-button style="color:#165dff;" link @click="a">修改</el-button>`,
            setup(props: any) {
              const a = () => {
                editHandler(props.params.data)
              }
              return {
                a,
              }
            },
          }
        }
        return obj
      })
      let a = [
        {
          showRowGroup: 'hide_def',
          headerName: '',
          checkboxSelection: true,
          headerCheckboxSelection: true,
          pinned: 'left',
          width: 50,
          resizable: false,
          filter: false,
          sortable: false,
          minWidth: 50,
          maxWidth: 50,
          lockPosition: 'left',
        },
      ]
      tc = a.concat(tc)
      const localeText1: any = ref(localeText)

      const addRowIndex = () => {
        dataForm.dataList.push({})
      }
      const deleteRowIndex = (record: number) => {
        dataForm.dataList.splice(record, 1)
      }
      const configAgGridRef = ref(null)
      const addDrawerColumn = ref([
        {
          showRowGroup: 'hide_def',
          headerName: '',
          checkboxSelection: true,
          headerCheckboxSelection: true,
          pinned: 'left',
          width: 50,
          resizable: false,
          filter: false,
          sortable: false,
          minWidth: 50,
          maxWidth: 50,
          lockPosition: 'left',
        },
        {
          headerName: '库位',
          field: 'blemishType',
        },
        {
          headerName: '匹号',
          field: 'blemishType',
        },
        {
          headerName: '磅布重量',
          field: 'blemishType',
        },
        {
          headerName: '重量',
          field: 'blemishType',
        },
        {
          headerName: '磅布米数',
          field: 'blemishType',
        },
        {
          headerName: '米数',
          field: 'blemishType',
        },
        {
          headerName: '门幅',
          field: 'blemishType',
        },
        {
          headerName: '克重',
          field: 'blemishType',
        },
        {
          headerName: '检验等级',
          field: 'blemishType',
        },
        {
          headerName: '批核后等级',
          field: 'blemishType',
        },
        {
          headerName: '结算数量',
          field: 'blemishType',
        },
        {
          headerName: '出货长度',
          field: 'blemishType',
        },
        {
          headerName: '出货长度单位',
          field: 'blemishType',
        },
        {
          headerName: '出货重量',
          field: 'blemishType',
        },
        {
          headerName: '出货重量单位',
          field: 'blemishType',
        },
        {
          headerName: '坯布条形码',
          field: 'blemishType',
        },
        {
          headerName: '坯布匹数',
          field: 'blemishType',
        },
        {
          headerName: '坯布重量',
          field: 'blemishType',
        },
        {
          headerName: '布票号',
          field: 'blemishType',
        },
        {
          headerName: '备注',
          field: 'blemishType',
        },
        {
          headerName: '操作',
          field: 'blemishType',
        },
      ])
      let configaggrid = ref({
        url: '', //接口路径
        queryData: {
          //接口参数
        },
        paginationShow: true, //分页是否显示
        invokeiIterface: false, //是否调用接
        rowMultiSelectWithClick: true, //点击行是否多选
        column: addDrawerColumn,
      })
      return {
        deleteHandler,
        sideOk,
        formRef,
        dataForm,
        addHandler,
        pagination,
        table,
        pageData,
        editHandler,
        selectHandler,
        headerShow,
        nextDoRefreshPage,
        nextDoRefreshSize,
        defaultColDef,
        localeText1,
        tc,
        gridReady,
        gridOption,
        addRowIndex,
        deleteRowIndex,
        configAgGridRef,
        configaggrid,
        addDrawerColumn,
      }
    },
    components: { Toolbar,  },
  }
</script>
<style scoped lang="less">
  :deep(.ag-cell) {
    border-right: 1px solid #dde2eb;
  }

  :deep(.ag-header-cell) {
    border-right: 1px solid #dde2eb;
  }

  :deep(.ag-cell-value) {
    user-select: initial;
    -moz-user-select: text;
    -ms-user-select: text;
    -webkit-user-select: text;
  }
  :deep(.arco-picker input){
    padding-left: 0 !important;
}
:deep(.arco-picker){
    padding-left: 0 !important;
}
:deep(.arco-picker-separator){
    padding: 0 !important;
}
</style>
